<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>管理员查看所有用户列表</title>
  <style></style>
</head>

<body align="center" border="1px">
  <h1>用户列表</h1>
  <hr>
  <a href="./query.html">查询单个用户入口</a>
  <hr>
  <table align="center" border="1px">
    <thead>
      <tr>
        <th style="width: 70px;">序号</th>
        <th style="width: 120px;">用户名</th>
        <th style="width: 150px;">用户邮箱</th> 
        <th style="width: 150px;">用户姓名</th>       
        <th style="width: 150px;">用户性别</th>
        <th style="width: 150px;">出生年月</th>
        <th style="width: 150px;">用户电话号码</th>
        <th style="width: 80px;">删除</th>
      </tr>
    </thead>
    <tbody id="userslist"></tbody>
  </table>
  <script>
    //获取元素
    let userslist = document.getElementById('userslist');
    //写ajax函数
    function ajax() {
      let xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            var result = JSON.parse(xhr.responseText);
            console.log(result);
            //调用显示函数showlist
            showlist(result.data);
          } else {
            console.log('数据返回错误')
          }
        }
      }
      xhr.open('GET', '/v1/user/list', true)
      xhr.send();
    }
    //调用ajax函数
    ajax();
    //创建用于遍历显示的showlist函数
    function showlist(arr) {
      //创建一个空字符串接收遍历得来的数据
      let str = '';
      let add = '';
      let a = '';
      //遍历获取数据库数据
      for (let i = 0; i < arr.length; i++) {
        //用三目运算符判断用户是男是女
        add=arr[i].sex;
        a=add===1?"男":"女";
        str += `
          <tr>
            <td>${arr[i].id}</td>
            <td>${arr[i].rser}</td> 
            <td>${arr[i].emaile}</td>
            <td>${arr[i].nema}</td>
            <td>${a}</td>
            <td>${arr[i].Birthday}</td>
            <td>${arr[i].uphoer}</td>
            <td><button onclick=del(${arr[i].id})>删除</button></td>
          </tr>`

      }
      //插入到userslist标签中进行显示
      userslist.innerHTML = str;
    }
    //删除用户数据的函数，要触发ajax
    function del(id){
     // alert(id);
     let xhr = new XMLHttpRequest();
     xhr.onreadystatechange=function(){
       if(xhr.readyState===4){
         if(xhr.status>=200 && xhr.status<300){
           let result=JSON.parse(xhr.responseText);
           console.log(result);
           if (result.code===1) {
             //重新去后台查询所有内容，并手动刷新页面，查看内容
             alert(result.msg);
             ajax();
           }
         }else{
           console.log('返回数据错误')
         }
       }
     }           //`/admin/del/${id}`这一段的符号用的是制表符上的符号
     xhr.open('DELETE',`/v1/user/del/${id}`,true);
     xhr.send();
    }
  </script>
</body>

</html>